<template>
  <main>
    <div class="tile is-parent">
      <article class="tile is-child box">
        <div class="block">
          <div class="control is-horizontal">
            <div class="control-label">
              <label class="label">对象IP</label>
            </div>
            <div class="control is-grouped">
              <p class="control is-expanded">
                <input class="input" type="text" placeholder="Name">
              </p>
              <p class="control is-expanded">
                <input type="radio"> <label for="">源</label>
                <input type="radio"><label for="">端</label>
              </p>
            </div>
          </div>
          <div class="control is-horizontal">
            <div class="control-label">
              <label class="label">关键词</label>
            </div>
            <div class="control is-grouped">
              <p class="control is-expanded">
                <input class="input" type="text" placeholder="Name">
              </p>
            </div>
          </div>
          <div class="control is-horizontal">
            <div class="control-label">
              <label class="label">时间段</label>
            </div>
            <div class="control is-grouped">
              <p class="control is-expanded">
                <datepicker :inputClass="{ test: true }" v-model="value"></datepicker>
              </p>
              <p class="control is-expanded">
                <datepicker :inputClass="{ test: true }" v-model="value"></datepicker>
              </p>
            </div>
          </div>
          <div class="control is-horizontal">
            <div class="control-label">
              <label class="label">日志类型</label>
            </div>
            <div class="control is-grouped">
              <p>
                <input type="checkbox"><label for="">防火墙</label>
                <input type="checkbox"><label for="">防火墙</label>
                <input type="checkbox"><label for="">防火墙</label>
                <input type="checkbox"><label for="">防火墙</label>
                <input type="checkbox"><label for="">防火墙</label>
              </p>
            </div>
          </div>
          <div class="control is-horizontal">
            <div class="control-label">
              <label class="label"> 查询SQL</label>
            </div>
            <div class="control">
              <textarea class="textarea" placeholder=""></textarea>
            </div>
          </div>
          <div class="control is-horizontal">
            <div class="control-label">
              <label class="label"></label>
            </div>
            <div class="control">
              <button class="button is-primary">查询</button>
            </div>
          </div>
        </div>
      </article>
    </div>



    <div class="tile is-ancestor">
      <div class="tile is-parent">
        <article class="tile is-child box">
          <div class="table-responsive">
            <table class="table is-bordered is-striped is-narrow">
              <thead>
              <tr>
                <th>主机/用户ID</th>
                <th>时间</th>
                <th>协议名称</th>
                <th>端口</th>
                <th>日志类型</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td class="is-icon">
                  12.12.12.12
                </td>
                <td>
                  2017/7/7 12:21:01
                </td>
                <td>
                  HTTPS
                </td>
                <td>
                 88
                </td>
                <td>
                  1
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </article>
      </div>
    </div>
  </main>
</template>

<script>
  import { BackToTop } from 'vue-bulma-jump'
  import Tooltip from 'vue-bulma-tooltip'
  import Chart from 'vue-bulma-chartjs'
  import Datepicker from 'vue-bulma-datepicker'
  import { Collapse, Item as CollapseItem } from 'vue-bulma-collapse'
  export default {
    components: {BackToTop, Tooltip, Chart, Datepicker, Collapse, CollapseItem},

    data () {
      return {
        value: '2016-12-12'
      }
    },

    computed: {
    },

    mounted () {
    }
  }
</script>

<style lang="scss" scoped>
  .is-grouped>p{
    line-height: 34px;
  }
  input[type='radio'],input[type='checkbox']{
    margin: 0 5px;
  }
</style>
